<script>
  import $ from '../dfish.js'
  import {
    h,
    mergeProps
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import Scroll from './Scroll.vue'

  export default {
    name: 'w-grid',
    mixins: [Scroll],
    props: ['columns', 'rows', 'gap', 'defaultColspan', 'face'],
    methods: {
      x_default() {
        return {
          columns: 12,
          gap: 0,
        }
      },
      html_slots() {
        return this.x.scrollX || this.x.scrollY ? this.html_scroll_slots() : h('div', {
          class: 'w-grid-cont',
          style: this.html_scroll_cont_style,
        }, this.$slots)
      },
    },
    computed: {
      html_props() {
        return {
          class: [this.x.rows ? 'z-full' : 'z-auto', this.x.face && 'z-face-' + this.x.face, this.html_scroll_class],
        }
      },
      html_scroll_cont_style() {
        let cols = this.x.columns
        if ($.isNumber(cols)) cols = `repeat(${cols}, 1fr)`
        let rows = this.x.rows
        if ($.isNumber(rows)) rows = `repeat(${rows}, 1fr)`
        let dc = this.x.defaultColspan
        return {
          'grid-template-columns': cols,
          'grid-template-rows': rows,
          'grid-gap': this.x.gap ? $.unitSize(this.x.gap) : '',
          '--w-grid-colspan': (dc == -1 || dc == null ? '' : `span ${dc}`),
        }
      }
    }
  }
</script>

<style>
  .w-grid {
    box-sizing: border-box;
  }

  .w-grid-cont,
  .w-grid.w-scroll>.w-scroll-overflow>.w-scroll-cont {
    display: grid;
    grid-auto-flow: row;
    box-sizing: border-box;
  }

  .w-grid-cont>*,
  .w-grid.w-scroll>.w-scroll-overflow>.w-scroll-cont>* {
    grid-column: var(--w-grid-colspan, 1 / -1);
    grid-row: var(--w-grid-rowspan);
  }

  .w-grid.z-full>.w-grid-cont {
    height: 100%;
  }

  .w-grid.w-scroll.z-auto>.w-scroll-overflow>.w-scroll-cont {
    min-height: auto;
  }

  .w-grid.z-face-cell {
    border-top: 1px solid var(--w-grid-cell-border-color);
    border-left: 1px solid var(--w-grid-cell-border-color);
  }

  .w-grid.z-face-cell .w-formbase {
    align-items: stretch;
    border-right: 1px solid var(--w-grid-cell-border-color);
    border-bottom: 1px solid var(--w-grid-cell-border-color);
  }

  .w-grid.z-face-cell .w-label {
    background: var(--w-grid-cell-label-background-color);
    border-right: 1px solid var(--w-grid-cell-border-color);
  }

  .w-grid.z-face-cell .w-input-border,
  .w-grid.z-face-cell .w-input .w-formbase {
    border: 0;
  }

  .w-grid.z-face-cell .w-fileupload {
    align-items: stretch;
  }

  .w-grid.z-face-cell .w-fileupload>.w-input {
    padding: 10px;
    justify-content: center;
  }

  .w-grid.z-face-cell .w-imageupload>.w-input,
  .w-grid.z-face-cell .w-mediaupload>.w-input {
    padding: 10px;
  }

  .w-grid.z-face-cell .w-form>.w-input,
  .w-grid.z-face-cell .w-switch>.w-input,
  .w-grid.z-face-cell .w-radiogroup>.w-input,
  .w-grid.z-face-cell .w-checkboxgroup>.w-input {
    padding-left: 10px;
    padding-right: 10px;
  }

  .w-grid.z-face-cell .w-boxgroup-grid {
    padding: 10px 0;
  }
  
  .w-grid.z-face-cell .w-combobox-list {
    padding-left: 5px;
  }
</style>
